<!DOCTYPE html>
<html ng-app="wecare">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>We Care</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <meta name="msapplication-tap-highlight" content="no"/>

        <link rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="visual/css/main.css" type="text/css">

        <script src="vendors/jquery/jquery.min.js" type="text/javascript"></script>
        <script src="vendors/hammerjs/hammer.js" type="text/javascript"></script>
        <script src="vendors/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="vendors/angularjs/angular.min.js" type="text/javascript"></script>
        <script src="vendors/jschart/jscharts.js" type="text/javascript"></script>
        <script src='https://cdn.firebase.com/v0/firebase.js'></script>
        <script src='vendors/angularfire.js'></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    	<!-- 
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      </script>
<script>
      function drawHeart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Heart Beat Rate'],
    ["10/19", 60], 
    ["10/20", 70], 
    ["10/21", 120], 
    ["10/22", 100], 
    ["10/23", 80], 
    ["10/24", 110], 
    ["10/25", 60], 
    ["10/26", 60]
        ]);

        var options = {
         title: 'Heart Beat Rate History',
          animation:{
        duration: 1000, 
        easing:'out'
      },
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_heart'));
        chart.draw(data, options);
      }
      
      function drawWeight() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Weight'],
    ["10/19", 160], 
    ["10/20", 170], 
    ["10/21", 165], 
    ["10/22", 168], 
    ["10/23", 162], 
    ["10/24", 158], 
    ["10/25", 160], 
    ["10/26", 160]
        ]);

        var options = {
          title: 'Weight History',
          animation:{
        duration: 1000, 
        easing:'out'
      },
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_weight'));
        chart.draw(data, options);
      }
      
      
      function drawVisualization() {
               drawHeart();
                drawWeight();

            }

            google.setOnLoadCallback(drawVisualization);
    </script>
 -->
        <script type="text/javascript">
            var wecare = {};
            var app = angular.module("wecare", ["firebase"])
            .directive("focus", function() {
              return function(scope, element, attrs) {
                return attrs.$observe("focus", function(newValue) {
                  return newValue === "true" && element[0].focus();
                });
              };
            });
            
         wecare.sliderController   = function($scope, $timeout) {
 var slidesInSlideshow = 6;
 var slidesTimeIntervalInMs = 5000; 
  
  $scope.slideshow = 1;
  var slideTimer =
    $timeout(function interval() {
      $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
      slideTimer = $timeout(interval, slidesTimeIntervalInMs);
    }, slidesTimeIntervalInMs);
};
            wecare.taskListController = function($scope, angularFire, $timeout){
                var taskRef = new Firebase("https://putcncx.firebaseIO.com/taskItems");
                angularFire(taskRef, $scope, "taskItems");

                var msgRef = new Firebase("https://putcncx.firebaseIO.com/msg");
                angularFire(msgRef, $scope, "msg");
                $scope.msg = [];
                $scope.taskItems = [];

                $scope.update = function(taskItem, index) {
                  $scope.selectedtaskItem = taskItem
                  $scope.selectedtaskItem.index = index
                }

                $timeout(function() {
                    $scope.taskItems = [
                    {
                        isBio : true,
                        bioType : "wi",
                        text : "Measure your weight as soon as you wake up",
                        source : "Annie's notes"
                    },{
                        isBio : true,
                        bioType : "pill",
                        text : "Take Pill",
                        source : "Annie's notes"
                    },{
                        isBio : true,
                        bioType : "bp",
                        text : "Blood Pressure",
                        source : "Annie's notes"
                    },{
                        isBio : true,
                        bioType : "hb",
                        text : "Heart Beat",
                        source : "Annie's notes"
                    },{
                        isBio : true,
                        bioType : "ekg",
                        text : "Wear EKG measurement belt",
                        source : "Annie's notes"
                    },{
                        time : "10AM",
                        text : "Read Newspaper",
                        note : ""
                    },{
                        time : "12PM",
                        text : "order Lunch from Mediterrean Wraps"
                    },{
                        time : "13PM",
                        text : "Afternoon nap time"
                    },{
                        time : "17PM",
                        text : "Lunch with Jin @ Mediterrean Wraps"
                    },{
                        time : "18PM",
                        text : "Dinner: Take food from Fridge"
                    },{
                        time : "19PM",
                        text : "Get ready to go to Bed"
                    }];

                }, 1000)


                $scope.toggleUtilityMenu = function(taskItem){  
                    if(taskItem.showUtiliy){
                        taskItem.showUtiliy = false;
                    }else{
                        taskItem.showUtiliy = true;
                    }
                }
                $scope.encourageBtnClicked = function(taskItem, btnType){
                    if(btnType == "thumbup"){
                        taskItem.isThumbup = taskItem.isThumbup ? false : true;
                    }

                    if(btnType == "smile"){
                        taskItem.isSmile = taskItem.isSmile ? false : true;
                    }
                }
            }
            wecare.commentsController = function($scope, angularFire, $timeout){
                var commentsRef = new Firebase("https://putcncx.firebaseIO.com/comments");
                angularFire(commentsRef, $scope, "comments");
                $scope.comments = [];
                $scope.newComment = {
                    from : {
                        name : "Annie",
                        avatar : "visual/images/annie.png"
                    },
                    text : "",
                    time : "10/Aug",
                    mood : "happy",
                    thumbup : "0",
                    samehere : "0"
                }

                $scope.setMood = function(mood){
                    $scope.newComment.mood = mood;
                }
                $scope.sendComment = function(){
                    $scope.comments.push($scope.newComment);
                    $scope.newComment = {
                        from : {
                            name : "Annie",
                            avatar : "visual/images/annie.png"
                        },
                        text : "",
                        time : "10/Aug",
                        mood : "happy",
                        thumbup : "0",
                        samehere : "0"
                    }
                }
                $timeout(function() {
                    $scope.comments = [{
                        from : {
                            name : "Annie",
                            avatar : "visual/images/annie.png"
                        },
                        text : "the doctor's statement shows Mark's condition is stable",
                        time : "10/Aug",
                        mood : "happy",
                        thumbup : "10",
                        samehere : "15"
                    },{
                        from : {
                            name : "Mark",
                            avatar : "visual/images/ming.jpg"
                        },
                        text : "the doctor's statement shows Mark's condition is stable",
                        time : "10/Aug",
                        mood : "unhappy",
                        thumbup : "1",
                        samehere : "17"
                    },{
                        from : {
                            name : "Mark",
                            avatar : "visual/images/ming.jpg"
                        },
                        text : "the doctor's statement shows Mark's condition is stable",
                        time : "10/Aug",
                        mood : "question",
                        thumbup : "1",
                        samehere : "17"
                    }]
                }, 1500)
            }

            wecare.main = function($scope){
                $scope.menuShown = false;
                
                $scope.toggleMenu = function(){
                    $scope.menuShown = $scope.menuShown ? false : true;
                }
            }
        </script>
        
        <script src="app/main.js" type="text/javascript"></script>


    </head>

    <body ng-controller="wecare.main">
        <div class="cardsWrapper">
            <div class="planViewer card">
                <div class="patientOverView" style="background-color:#8ec447">
                    <table width="100%">
                        <tr>
                            <td width="110">
                                <img src="visual/images/u560_normal.jpg" width="110" height="110"/>
                            </td>
                            <!-- <td><div id="chart_div" style="height: 110px; width:500px;"></div></td> -->
                            
                            <td valign="top">
                            
                            <div ng-controller="wecare.sliderController" class="slideshow" ng-switch='slideshow' ng-animate="'animate'">
							 
							  <div class="slider-content" ng-switch-when='1'>
         <img border="0" src="./visual/images/weight_today.jpg" alt="weight_today" height = "110">
         </div>
        				  <div class="slider-content" ng-switch-when='2'>
         <img border="0" src="./visual/images/weight_history.png" alt="weight_history" height = "110">
         </div>
         <div class="slider-content" ng-switch-when='3'>
         <img border="0" src="./visual/images/heart_today.jpg" alt="heart_today" height = "110">
         </div>
        <div class="slider-content" ng-switch-when='4'>
        <img border="0" src="./visual/images/heart_beat_history.png" alt="weight_history" height="110">
        </div>
        <div class="slider-content" ng-switch-when='5'>
         <img border="0" src="./visual/images/blood_today.png" alt="blood_today" height = "110">
         </div>
        <div class="slider-content" ng-switch-when='6'>
         <img border="0" src="./visual/images/blood_pressure_history.png" alt="weight_history" height="110">
         </div>
</div>
                            </td>
                            
                        </tr>
                    </table>
                </div>
                <div class="date">
                    10/28 Monday
                </div>
                <div class="taskList" ng-controller="wecare.taskListController">
                    <div class="activityItem" ng-repeat="taskItem in taskItems" ng-class="{'bio-item' : taskItem.isBio}" >
                        <table ng-click="toggleUtilityMenu(taskItem)">
                            <tr>
                                <td class="img" v-align="center">
                                    <img ng-src="visual/images/{{taskItem.bioType}}.png" ng-show="taskItem.isBio" />
                                    <span ng-show="!taskItem.isBio">{{taskItem.time}}</span>
                                </td>
                                <td>
                                    {{taskItem.text}}
                                    <span ng-show="taskItem.isThumbup" class="thumbs-up"></span>
                                    <span ng-show="taskItem.isSmile" class="smile"></span>
                                </td>
                            </tr>
                        </table>
                        <div class="activityItemAttachment" ng-show="taskItem.showUtiliy">
                            <img  src="visual/images/u593_normal.png" ng-click="encourageBtnClicked(taskItem, 'thumbup')" />
                            <img  src="visual/images/happy.png" width="24" height="24" ng-click="encourageBtnClicked(taskItem, 'smile')" />
                            <div class="message">
                                <input type="text" ng-model="taskItem.note" ng-change="update(taskItem, $index)" ng-click="update(taskItem, $index)" focus="{{$index == selectedtaskItem.index}}">
                                <img  src="visual/images/u117_normal.png" ng-click="encourageBtnClicked(taskItem, 'audio')" />
                                <img  src="visual/images/u119_normal.png" ng-click="encourageBtnClicked(taskItem, 'video')" />
                            </div>
                        </div>
                        <div class="done" ng-show="taskItem.isDone"></div>
                    </div>
                </div>
                <div class="slideMenu">

                </div>
            </div>
            <div class="planCreator card" ng-controller="wecare.commentsController">
                <div class="comments">
                    <div class="comment" ng-repeat="comment in comments" ng-class="comment.mood">
                        <table>
                            <tr>
                                <td width="150" align="center">
                                    <img ng-src="{{comment.from.avatar}}" height="100"/>
                                </td>
                                <td>
                                    {{comment.text}}
                                </td>
                            </tr>
                        </table>
                        <div class="commentUtility">
                            <span>thumbup {{comment.thumbup}}</span>
                            <span>same here {{comment.samehere}}</span>
                        </div>
                    </div>    
                </div>
                <div class="commentInput" ng-class="newComment.mood">
                    <table width="100%">
                        <tr>
                            <td>
                                <input ng-model="newComment.text"/>
                            </td>
                            <td width="50">
                                <button ng-click="sendComment()">send</button>
                            </td>
                        </tr>
                    </table>
                    <table width="100%">
                        <tr>
                            <td ng-click="setMood('happy')">happy</td>
                            <td ng-click="setMood('unhappy')">unhappy</td>
                            <td ng-click="setMood('question')">question</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="popupmenu" ng-class="{'shown' : menuShown}">
                <table width="100%">
                    <tr>
                        <td align="left">
                            <img src="visual/images/u181_normal.png" />
                        </td>
                        <td align="right">
                            <img src="visual/images/menu_up_u187_normal.png" width="35" ng-click="toggleMenu()" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Plan a day
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Profile
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Activity history
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="30">
                            <img src="visual/images/u588_normal.png" />
                        </td>
                        <td align="left">
                            Assign to another caregiver
                        </td>
                    </tr>
                    <tr>
                        <td colspan="100">
                            <img src="visual/images/ekg-learn2.png" /> Learn about it
                        </td>
                    </tr>
                    <tr>
                        <tr>
                        <td colspan="100">
                            <img src="visual/images/EKG-novdev-small.png" /> Send to Doctor
                        </td>
                    </tr>
                    </tr>

                </table>
            </div>

        </div>
    </body>
</html>
